<template>
    <el-row>
        <el-col :span="6">
            <el-statistic title="当月受理订单" :value="orderPerMonth" />
        </el-col>
        <el-col :span="6">
            <el-statistic :value="operating">
                <template #title>
                    <div style="display: inline-flex; align-items: center">
                        当前运行机器人
                        <el-icon style="margin-left: 4px" :size="12">
                            <Monitor />
                        </el-icon>
                    </div>
                </template>
                <template #suffix>/{{robotNum}}</template>
            </el-statistic>
        </el-col>
        <el-col :span="6">
            <el-statistic title="全自动中台" :value="autoMiddleground" />
        </el-col>
        <el-col :span="6">
            <el-statistic title="机器人" :value="dealByRobot">
                <template #suffix>
                    <el-icon style="vertical-align: -0.125em">
                        <ChatLineRound />
                    </el-icon>
                </template>
            </el-statistic>
        </el-col>
    </el-row>
</template>
  
<script lang="ts" setup>
import { ChatLineRound, Monitor } from '@element-plus/icons-vue'
</script>
<script lang="ts">
export default{
    data(){
        return{
            orderPerMonth:268500,
            robotNum:138,
            operating:100,
            autoMiddleground:172000,
            dealByRobot:562,
        }
    },
    methods:{

    },
}


</script>
  
<style scoped>
.el-col {
    text-align: center;
}
</style>
  